<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html lang="zh">
<head>
<%@include file="/WEB-INF/jsp/common/header.jsp"%>
<style type="text/css">
.addForm {
	width: 120px;
}
</style>
<script type="text/javascript">
    var userListTable;
	$(document).ready(function() {
		$("#resetForm").click(function() {
			$("#form input").val("");
		});
		$("#save").click(function() {
			var uid = $(".modal-body input[name=id]").val();
			var nickname = $(".modal-body input[name=nickname]").val();
			var password = $(".modal-body input[name=password]").val();
			var password2 = $(".modal-body input[name=password2]").val();
			var mobile = $(".modal-body input[name=mobile]").val();
			if ($.trim(nickname) === "") {
				$.messager.alert("账户名不能为空");
				return false;
			}
			if($.trim(password) !== "" || $.trim(password2) !== ""){
                if ($.trim(password) == "") {
                    $.messager.alert("密码不能为空");
                    return false;
                }
                if ($.trim(password2) == "") {
                    $.messager.alert("确认密码不能为空");
                    return false;
                }
                if($.trim(password)!="" && $.trim(password) != $.trim(password2)){
                    $.messager.alert("二次输入的密码不一致");
                    return false;
                }
            }

			$(this).attr("disabled","disabled");
			$.ajax({
				type : "POST",
				url : contextpath + "/web/user/update",
				data : {'id':uid, "nickname":nickname, "password":password,'mobile':mobile},
				success : function(result) {
					if (result.code === 200) {
                        $("#save").removeAttr("disabled");
                        $("#editModal").modal("hide");
                        $.messager.alert("保存成功");
                        userListTable.ajax.reload(null, false);
					} else {
                        $.messager.alert(result.msg);
					}
				}
			});
		});
		$("#add").click(function() {
			$(".modal-body input[type!=checkbox]").val("");
			$("#password").show();
			$("#password2").show();
			$("input[type=checkbox]").removeAttr("checked");
			$("#editModal").modal('show');
		});
		$("#closeModal").click(function() {
			$("#editModal").modal('hide');
		});
		$(".edit").click(function() {
			var mId = $(this).attr("mId");
			$("#password").hide();
			$("#password2").hide();
			$.ajax({
				type : "POST",
				url : "info?mId=" + mId,
				data : "t=" + Math.round(999 * Math.random()),
				success : function(result) {
					if (result.code == 0) {
						$("input[type=checkbox]").removeAttr("checked");
						$(".modal-body input[name=uid]").val(result.content.uid);
						$(".modal-body input[name=login_name]").val(result.content.login_name);
						$(".modal-body input[name=nick_name]").val(result.content.nick_name);
						var mrkList=result.content.mrkList;
						if (mrkList!="" && mrkList!=null) {
			        		for ( var i = 0; i < mrkList.length; i++) {
			        			$("input[type=checkbox]").each(function(){	
					        		if(mrkList[i].role_id==$(this).attr("value")){
					        			$(this).prop("checked",true);  
									}
			        			});
			        		}
					    }
						$("#editModal").modal('show');
					} else {
						alert(result.msg);
					}
				}
			});
		});
		$(".revoke").click(function() {
			var mId = $(this).attr("mId");
			if (confirm("确定删除用户？")) {
				$.ajax({
					type : "POST",
					url : "revoke?mId=" + mId,
					data : "t=" + Math.round(999 * Math.random()),
					success : function(result) {
						if (result.code == 0) {
							location.reload();
						} else {
							alert(result.msg);
						}
					}
				});
			}
		});
		
		$("#savePassword").click(function() {
			var mId = $("#passwordModal input[name=mId]").val();
			var password = $("#passwordModal input[name=password]").val();
			var password2 = $("#passwordModal input[name=password2]").val();
			if($.trim(password)==""){
				$.messager.alert("密码不能为空");
				return false;
			}
			if($.trim(password2)==""){
				$.messager.alert("确认密码不能为空");
				return false;
			}
			if($.trim(password2)!=""  && $.trim(password)!=$.trim(password2)){
				$.messager.alert("二次输入的密码不一致");
				return false;
			}
			$(this).attr("disabled","disabled");
			$.ajax({
				type : "POST",
				url : "updatePassword",
				data : "t=" + Math.round(999 * Math.random()) + "&mId=" + mId +"&password=" + password,
				success : function(result) {
					if (result.code == 0) {
						$(this).removeAttr("disabled");
						alert("保存成功");
						location.reload();
					} else {
						alert(result.msg);
					}
				}
			});
		});
		$(".updatePassword").click(function() {
			var mId = $(this).attr("mId");
			$.ajax({
				type : "POST",
				url : "info?mId=" + mId,
				data : "t=" + Math.round(999 * Math.random()),
				success : function(result) {
					if (result.code == 0) {
						$("#passwordModal input[name=mId]").val(result.content.uid);
						$("#login_name").text(result.content.login_name);
						$("#nick_name").text(result.content.nick_name);
						$("#passwordModal").modal('show');
					} else {
						alert(result.msg);
					}
				}
			});
		});
		$("#closePasswordModal").click(function() {
			$("#passwordModal").modal('hide');
		});

        userListTable = $('#userListTable').DataTable({
            "bSort": true, //是否启动各个字段的排序功能
            "aaSorting": [[4, "desc"]], //默认的排序方式
            "aoColumns": [
                {
                    "mDataProp": "avatar",
                    "sTitle":"头像",
                    "sDefaultContent": "--",
                    "sWidth": "80px",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--'){
                            $(nTd).html('<img src="'+ sData +'" alt="头像" width="32" height="32">');
                        }
                    }
                },
                {
                    "mDataProp": "name",
                    "sTitle":"姓名",
                    "sDefaultContent": "--",
                    "sWidth": "20%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') $(nTd).attr('title',sData);
                    }
                },
                {
                    "mDataProp": "nickname",
                    "sTitle":"昵称",
                    "sDefaultContent": "--",
                    "sWidth": "20%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : true,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') $(nTd).attr('title',sData);
                    }
                },
                {
                    "mDataProp": "mobile",
                    "sTitle":"联系电话",
                    "sDefaultContent": "--",
                    "sWidth": "20%",
                    "sClass": "center flow",
                    "bSortable": false,//是否支持排序
                    "bSearchable" : false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if(sData !== '--') $(nTd).attr('title',sData);
                    }
                },
                {
                    "mDataProp": "createTime",
                    "sTitle": "创建时间",
                    "sWidth": "15%",
                    "sDefaultContent": "--",
                    "bSortable": true,
                    "sClass": "center flow",
                    "bSearchable": false,//是否支持条件查询
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        if (sData !== '--') $(nTd).attr('title', sData);
                    }
                },
                {
                    "mDataProp": "id",
                    "sTitle": "操作",
                    "sWidth": "120px",
                    "sClass": "center flow",
                    "bSearchable": false,
                    "bSortable": false,
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html("<a class='btn btn-xs btn-default' href='javascript:void(0);' onclick='editUser(" + iRow + ")'><i class='fa fa-pencil'></i>&nbsp;编辑</a>")
                    }
                }
            ],
            "ajax": {
                url: contextpath + '/web/user/queryPage',
                type:"post",
                data: function(data){
                    $.xDataTablesParams(data, $.trim($('#nickname').val()));
                    data['search.mobile'] = $.trim($('#mobile').val());
                    return data;
                }
            }
        }).on('xhr.dt', function ( e, settings, json, xhr ) {
            $('#selectAll').removeAttr('checked');
        });

        $('#editModal').on('hide.bs.modal', function () {
            $('#editModal :input[name=id]').val('');
            $('#editModal :input[name=nickname]').val('');
            $('#editModal :input[name=mobile]').val('');
            $('#editModal :input[name=password]').val('');
            $('#editModal :input[name=password2]').val('');
        });
	});

	function editUser(row){
        var rowData = userListTable.row(row).data();
        $('#editModal :input[name=id]').val(rowData.id);
        $('#editModal :input[name=nickname]').val(rowData.nickname);
        $('#editModal :input[name=mobile]').val(rowData.mobile);
        $('#editModal :input[name=password]').val('');
        $('#editModal :input[name=password2]').val('');
	    $('#editModal').modal('show');
    }

    function searchTable(){
        userListTable.ajax.reload();
    }
</script>
</head>
<body>
	<div class="container-fluid">
		<div class="sub-header">
			<h2>用户列表</h2>
		</div>
		<br/>
		<form id="form" class="form-inline" role="form" action="#" method="post">
			<div class="form-group">
				<div class="input-group">
					<span class="input-group-addon">昵称</span>
					<input type="text" class="form-control" id="nickname" placeholder="昵称" style="width: 120px;">
				</div>
				<div class="input-group">
					<span class="input-group-addon">电话</span>
					<input type="text" class="form-control" id="mobile" placeholder="电话" style="width: 120px;">
				</div>
			</div>
			<button type="button" class="btn btn-default" onclick="searchTable()">查询</button>
		</form>
		<br>
		<div>
			<table class="table table-hover table-striped table-bordered" style="table-layout:fixed;" id="userListTable"></table>
		</div>
	</div>

	<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-lg" style="width: 600px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">编辑用户信息</h4>
				</div>
				<div class="modal-body">
					<input type="hidden" name="id">
					<table id="editTable" class="table-hover table table-bordered">
						<tr>
							<td>
								<div class="input-group">
									<span class="input-group-addon addForm">昵称</span> 
									<input type="text" class="form-control" name="nickname" placeholder="昵称" style="width: 320px;">
								</div>
							</td>
						</tr>
                        <tr>
                            <td>
                                <div class="input-group">
                                    <span class="input-group-addon addForm">电话</span>
                                    <input type="text" class="form-control" name="mobile" placeholder="电话" style="width: 320px;">
                                </div>
                            </td>
                        </tr>
						<tr id="password">
							<td>
								<div class="input-group">
									<span class="input-group-addon addForm">密码</span> 
									<input type="password" class="form-control" name="password" placeholder="密码" style="width: 320px;">
								</div>
							</td>
						</tr>
						<tr id="password2">
							<td>
								<div class="input-group">
									<span class="input-group-addon addForm">确认密码</span> 
									<input type="password" class="form-control" name="password2" placeholder="确认密码" style="width: 320px;">
								</div>
							</td>
						</tr>
						<tr>
							<td align="center">
								<button id="save" type="button" class="btn btn-success addForm">保 存</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								<button id="closeModal" type="button" class="btn btn-danger addForm">关闭</button>
							</td>
						</tr>
					</table>
				</div>
			</div>
		</div>
	</div>

</body>